<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>花瓣美图</title>
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
	<style>
		::-webkit-scrollbar{ display: none; }
		*{ margin:0; padding:0; }
		html,body,#view{ height:100%; width:100%; background:#333; color:#fff; overflow: auto; }
		#view{ width:85%;height:100%; margin:auto; }
		#tool{ position: absolute; top: 0; right: 0px; padding: 5px; }
		img.pin{ max-width: 15%; max-height: 30%; margin: 10px }
	</style>
</head>
<body>
	<div id="view"></div>
	<div id="tool">
		<button id="prev">上一页</button>
		<input id="keyword" placeholder="壁纸"/>
		<button id="next">下一页</button>
	</div>
</body>
<script type="text/javascript">
	var proxyBaseApi = "http://192.168.2.94:8081";
	// 新窗口打开链接 (不携带Referer头)
	function open_without_referrer(link){
		document.body.appendChild(document.createElement('iframe')).src='javascript:"<script>top.location.replace(\''+link+'\')<\/script>"';
	}
	// 新窗口打开链接 (不携带Referer头)
	function open_new_window(full_link){ 
 		window.open('javascript:window.name;', '<script>location.replace("'+full_link+'")<\/script>');
 	}
	// 花瓣数据解析完成事件
	window.parseSuccess = parseSuccess = function(app){
		var $view = $("#view").html(""), pins = app&&app.page ? app.page.pins : [];
		pins.map(function(e,i){
			var src = ["http://img.hb.aicdn.com/", e.file.key].join("");
			var $img = $("<img></img>").attr("src",`${proxyBaseApi}/api/get?proxy=${encodeURIComponent(src+"_fw236")}`).attr("data-src", src).addClass("pin");
			$img.on("error",function(){$(this).remove()});// 错误图片自我移除
			$view.append($img);
			return src;
		});
	}
	// 代理ajax
	function proxyAjax(url,data,callback) {
		$.ajax({
			url:'http://192.168.2.94:8081/api/post',
			type:'GET',
			contentType: "application/json; charset=utf-8;",
			data: data,
			beforeSend: function (XMLHttpRequest) {
				XMLHttpRequest.setRequestHeader("Proxy", url);
			},
			success:function(result,textStatus,jqXHR){
				if(textStatus==="success"){
					typeof callback=="function" ? callback(result) : null;
				}else{
					console.error("接口访问失败", result, textStatus, jqXHR);
				}
			},
			error:function(result,textStatus,jqXHR){
				console.error("代理服务器访问失败", result, textStatus, jqXHR);
			}
		});
	}


	// 程序入口
	$(document).ready(function(){
		// 初始配置
		var $view = $("#view"), keyword = "美", page = 1,size = 50;
		// 初始化事件
		$view.on("click",".pin",function(){
			open_new_window($(this).data("src").replace("_fw236",""));
		});
		$("#prev").on("click",function () {
			page>1 ? getImageByKeyword(keyword, --page, size) : null;
		});
		$("#next").on("click",function () {
			getImageByKeyword(keyword, ++page, size);
		});
		$("#keyword").on("change",function () {
			getImageByKeyword($(this).val(), page, size);
		});
		// 正确结果处理
		function resultCallback(re){
			$view.html(null);
			// 解析接口数据
			$(re).find("body").prevObject.filter(function(i,e){
				return e.nodeName=="SCRIPT"&&!e.src&&e.innerText.indexOf('app.page["pins"]')>=0?e:null;
			}).each(function(i,e){
				var $script = $("<script>"+e.innerText.replace("app.route();","window.parseSuccess(app);")+"<\/script>");
				$("body").append($script);
			});
		}
		// 根据关键字分页获取图片
		function getImageByKeyword(keyword,page,size){
			var url = `https://huaban.com/search/?q=${encodeURIComponent(keyword)}&page=${page}&per_page=${size}&type=${"pins"}`; //&category=beauty
			var proxyOption = {
				method:"GET",
				header:{ Referer:"http://huaban.com/" }
			};
			proxyAjax(url,proxyOption,resultCallback);
		};
		// 初始加载
		getImageByKeyword(keyword, page, size);
	});
</script>
</html>